import React, { Component } from 'react'
import { Icon } from 'antd-mobile'

export default class TradeV3 extends Component {
  render() {
    return (
      <div className={`rt-trande-v3-container`}>
        <img className={`rt-img`} alt="banner" src={require('static/images/logo-v2.png')} />

        <div className={`rt-announcement-box`}>
          <span>公告</span>
          <span>关于开通借记卡支付通道的通知</span>
        </div>

        <div className={`rt-price-real-time-box`}>
          <div className={`rt-left-box rt-active`}>
            <span>工业银</span>
            <span>3503</span>
            <Icon type="up" />
          </div>

          <div className={`rt-left-box`}>
            <span>工业油</span>
            <span>3513</span>
            <Icon type="down" />
          </div>
        </div>

        <div className={`rt-scrollable-container`}>
          <div className={`rt-staticstical-data-box`}>
            <span>昨收：3491</span>
            <span>开盘：3499</span>
            <span>最高：3520</span>
            <span>最低：3479</span>
          </div>

          <div className={`rt-chart-type-box`}>
            <span className={`rt-active`}>分时线</span>
            <span>5分钟线</span>
            <span>30分钟线</span>
            <span>1小时线</span>
            <span>日线</span>
          </div>

          <img className={`rt-img`} alt="chart" src={require('static/images/chart.png')} />

          <div className={`rt-about-me-box`}>
            <div className={`rt-left-box`}>
              <Icon type="user" />
              <span>资产</span>
              <span className={`rt-money`}>3,686.90元</span>
              <img alt="auth" src={require('static/images/auth.png')} />
            </div>

            <div className={`rt-right-box`}>
              <Icon type="question" />
              <span className={`rt-recharge`}>充值</span>
              <Icon type="question" />
              <span>提现</span>
            </div>
          </div>

          <div className={`rt-goods-list-box`}>
            <div className={`rt-goods`}>
              <span>3KG</span>
              <span className={`rt-middle`}>250元／手</span>
              <span>波动盈亏3元</span>
            </div>

            <div className={`rt-goods rt-active`}>
              <span>3KG</span>
              <span className={`rt-middle`}>250元／手</span>
              <span>波动盈亏3元</span>
            </div>

            <div className={`rt-goods`}>
              <span>3KG</span>
              <span className={`rt-middle`}>250元／手</span>
              <span>波动盈亏3元</span>
            </div>
          </div>

          <div className={`rt-btn-grp`}>
            <div>
              <Icon type="question" />
              <span>买涨</span>
            </div>

            <div>
              <Icon type="question" />
              <span>买跌</span>
            </div>
          </div>

          <p>正在交易的订单</p>

          <div className={`rt-deal-order`}>
            <div className={`rt-left-box`}>
              <div className={`rt-updown-box`}><span>涨</span></div>
              <div className={`rt-profit-loss-box`}>
                <img alt="profit-loss" src={require('static/images/shield.png')} />
                <span>止盈损</span>
              </div>
              <div className={`rt-goods`}>
                <span>3KG 工业银</span>
                <span>开仓价 3433</span>
              </div>
            </div>

            <div className={`rt-right-box`}>
              <span>+24.00</span>
              <div>
                <span>平仓</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}